<template>
    <div class="applyCationPage">
            <h3 class="apply-h3">应用中心</h3>
            <div class="apply-flex">
                <p class="apply-flex-name">宣传</p>
                <div class="apply-wrap">
                    <div class="apply-wrap-list" @click.stop="navToYW">
                        <!--<router-link :to="{path:'/propaganda/news'}">-->
                            <p class="apply-wrap-list-img">
                                <!--<mu-badge content="0" circle color="#EB4D44">-->
                                    <img src="@/views/home/img/yingyong_icon_xuanchuan_dangjianyaowen@2x.png" alt="">
                                <!--</mu-badge>-->
                            </p>
                            <p class="apply-wrap-list-span">党建要闻</p>
                        <!--</router-link>-->
                    </div>

                    <div class="apply-wrap-list" @click.stop="navTozz">
                        <!--<router-link :to="{path:'/propaganda/news'}">-->
                            <p class="apply-wrap-list-img">
                                <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                                <img src="@/views/home/img/yingying_icon_xuanchuan_zuzhidongtai@2x.png" alt="">
                            </p>
                            <p class="apply-wrap-list-span">组织动态</p>
                        <!--</router-link>-->
                    </div>
                    <div class="apply-wrap-list" @click.stop="navToAlbum">
                        <!--<router-link :to="{path:'/propaganda/album'}">-->
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_xuanchuan_dangjianxiangce@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">党建相册</p>
                        <!--</router-link>-->
                    </div>
                    <div class="apply-wrap-list" @click.stop="navToVideo">
                        <!--<router-link :to="{path:'/propaganda/video'}">-->
                            <p class="apply-wrap-list-img">
                                <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                                <img src="@/views/home/img/yingyong_icon_xuanchuan_dangjianweishi@2x.png" alt="">
                            </p>
                            <p class="apply-wrap-list-span">党建微视</p>
                        <!--</router-link>-->
                    </div>
                    <div class="apply-wrap-list" @click.stop="navToHeart">
                        <!--<router-link :to="{path:'/propaganda/love'}">-->
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_xuanchuan_yikehongxin@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">一颗红心</p>
                        <!--</router-link>-->
                    </div>
                    <div class="apply-wrap-list" @click.stop="navToTalk" >
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_xuanchuan_zhongyaojianghua@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">专题学习</p>
                    </div>
                    <div class="apply-wrap-list" @click.stop="navToFFCL" >
                        <!--<router-link :to="{path:'/propaganda/news'}">-->
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_xuanchuan_fanfuchanglian@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">反腐倡廉</p>
                        <!--</router-link>-->
                    </div>
                    <div class="apply-wrap-list" @click.stop="navToFPDT" >
                        <!--<router-link :to="{path:'/propaganda/news'}">-->
                    <p class="apply-wrap-list-img">
                        <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                        <img src="@/views/home/img/yingyong_icon_xuanchuan_fupindongtai@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">扶贫动态</p>
                        <!--</router-link>-->
                </div>
                    <div class="apply-wrap-list" @click.stop="navToDJDG" >
                        <!--<router-link :to="{path:'/propaganda/news'}">-->
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_xuanchuan_dangguidangji@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">党规党纪</p>
                        <!--</router-link>-->
                    </div>
                </div>
            </div>
        <div class="apply-flex">
            <p class="apply-flex-name">组织</p>
            <div class="apply-wrap">
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/organizationLife'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_dangdehuiyi@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">党的会议</p>
                    </router-link>
                </div>

                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/activityApply'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_huodongbaoming@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">活动报名</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/inform'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_qunzhongjiandu@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">群众监督</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/party_affairs_open'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_dangwugongkai@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">党务公开</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/workPlan'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_gongzuojihua@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">工作计划</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/classify'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_tongzhifabu@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">通知发布</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/possy_js'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_zhendijianshe@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">阵地建设</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/institutionalConstruction'}">
                <p class="apply-wrap-list-img">
                    <img src="@/views/home/img/yingyong_icon_zuzhi_zhidujianshe@2x.png" alt="">
                </p>
                <p class="apply-wrap-list-span">制度建设</p>
                    </router-link>
            </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/construction'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_zishenjianshe@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">组织建设</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/fund_safeguard'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_jingfeibaozhang@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">经费保障</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/PartyMemberManagement'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_dangyuanguanli@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">党员管理</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/home/bigData/partyMenberCount'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_dangjiandashuju@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">党建数据</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/organization/politicsBirthday'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_zuzhi_zhengzhishengri@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">政治生日</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/home/vote'}">
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/zuzhi_icon_toupiao@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">投票选举</p>
                    </router-link>
                </div>
            </div>
        </div>

        <div class="apply-flex">
            <p class="apply-flex-name">学习</p>
            <div class="apply-wrap">

                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/videoLearning'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_shipinxuexi@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">视频学习</p>
                    </router-link>
                </div>

                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/audioLearning'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_dangjiandiantai@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">党建电台</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/learningTopics'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_zhuantixuexi@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">学习专题</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/onlineExam'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_zaixiankaoshi@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">在线考试</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/badge'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_wodehuizhang@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">我的徽章</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/studyPlan'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_meiriyixue@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">每日一学</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/note'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_xuexibiji@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">学习笔记</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/ranking'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_xuexipaihangbang@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">学习排行榜</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/learnData'}">
                    <p class="apply-wrap-list-img">
                        <img src="@/views/home/img/yingyong_icon_xuexi_xuexishuju@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">学习数据</p>
                    </router-link>
                </div>
            </div>
        </div>

        <div class="apply-flex" style="margin-bottom: 30px">
            <p class="apply-flex-name">我的</p>
            <div class="apply-wrap">
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/UserInfo'}">
                    <p class="apply-wrap-list-img">
                        <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                        <img src="@/views/home/img/yingyong_icon_wode_gerenxinxi@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">个人信息</p>
                    </router-link>
                </div>

                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/Organization'}">
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_wode_zuzhixinxi@2x.png" alt="">
                        </p>
                    <p class="apply-wrap-list-span">组织信息</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/report/report'}">
                    <p class="apply-wrap-list-img">
                        <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                        <img src="@/views/home/img/yingyong_icon_wode_sixianghuibao@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">思想汇报</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/PartyPayment'}">
                    <p class="apply-wrap-list-img">
                        <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                        <img src="@/views/home/img/yingyong_icon_wode_dangfeijiaona@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">党费缴纳</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/Collection'}">
                    <p class="apply-wrap-list-img">
                        <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                        <img src="@/views/home/img/yingyong_icon_wode_wodeshoucang@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">我的收藏</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/learn/subscription'}">
                    <p class="apply-wrap-list-img">
                        <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                        <img src="@/views/home/img/yingyong_icon_wode_wodedingyue@2x.png" alt="">
                    </p>
                    <p class="apply-wrap-list-span">我的订阅</p>
                    </router-link>
                </div>
                <div class="apply-wrap-list">
                    <router-link :to="{path:'/mine/MyNotes'}">
                        <p class="apply-wrap-list-img">
                            <!--yingyong_icon_xuanchuan_dangjianyaowen@2x.png-->
                            <img src="@/views/home/img/yingyong_icon_wode_wodebiji@2x.png" alt="">
                        </p>
                        <p class="apply-wrap-list-span">我的笔记</p>
                    </router-link>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import {mapMutations} from 'vuex'
    export default({
        data(){
            return{

            }
        },
        methods:{
            ...mapMutations(['changeSubNav','addNavsenior']),
            navToYW(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='党建新闻'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'党建新闻'
                });
                //path:'/propaganda/news'
                this.$router.push({
                    path:'/propaganda/news',
                    query:{
                        from:'党建新闻'
                    }
                })
            },
            navTozz(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='组织动态'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'组织动态'
                });
                this.$router.push({
                    path:'/propaganda/news',
                    query:{
                        from:'组织动态'
                    }
                })
            },
            navToAlbum(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='党建相册'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'党建相册'
                });
                this.$router.push('/propaganda/album')
            },
            navToVideo(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='党建微视'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'党建微视'
                });
                this.$router.push('/propaganda/video')
            },
            navToHeart(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='一颗红心'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })

                this.$store.commit('changeIndex',{
                    selectName:'一颗红心'
                });
                this.$router.push('/propaganda/love')
            },
            navToTalk(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='专题学习'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'专题学习'
                });
                this.$router.push({
                    path:'/propaganda/news',
                    query:{
                        from:'专题学习'
                    }
                })
            },
            navToFFCL(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='反腐倡廉'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'反腐倡廉'
                });
                this.$router.push({
                    path:'/propaganda/news',
                    query:{
                        from:'反腐倡廉'
                    }
                })
            },
            navToFPDT(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='扶贫动态'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'扶贫动态'
                });
                this.$router.push({
                    path:'/propaganda/news',
                    query:{
                        from:'扶贫动态'
                    }
                })
            },
            navToDJDG(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='党纪党规'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'党纪党规'
                });
                this.$router.push({
                    path:'/propaganda/news',
                    query:{
                        from:'党纪党规'
                    }
                })
            }
        },
        mounted(){
            this.$progress.done();
        }
    })
</script>
<style lang="scss" scoped>
    .applyCationPage {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 0 16px;
        font-family:PingFang-SC-Medium;
        .apply-h3{
            font-size:28px;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            color:rgba(51,51,51,1);
            position: relative;
            padding-top: 27px;
            padding-bottom: 24px;
            margin: 0;
            &:after{
                position: absolute;
                content: '';
                right: -16px;
                top:0;
                width: 123px;
                height: 129px;
                background-image: url("../img/yingyong_bg@2x.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 123px 129px;
            }
        }
        .apply-flex{
            background: white;
            .apply-flex-name{
                font-size:16px;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                color:rgba(51,51,51,1);
                margin-bottom: 15px;
                margin-top: 35px;
            }
            .apply-wrap{
                background:rgba(255,255,255,1);
                box-shadow:0px 3px 25px 0px rgba(0, 0, 0, 0.05);
                border-radius:12px;
                .apply-wrap-list{
                    display: inline-block;
                    width: 20%;
                    vertical-align: middle;
                    height: 79px;
                    text-align: center;
                    a{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    .apply-wrap-list-img {
                        margin-top: 15px;
                        /*.mu-badge-circle{*/
                            /*width: 18px;*/
                            /*height: 18px;*/
                        /*}*/
                        img{
                            display: block;
                            margin: 0 auto;
                            width: 45px;
                        }
                    }
                    .apply-wrap-list-span{
                        font-size:11px;
                        font-weight:500;
                        color:rgba(102,102,102,1);
                        margin-top: 10px;
                    }
                }
            }
           /deep/ .mu-badge-container{
                display: inherit;
               .mu-badge-float {
                   right: 0.12rem;
               }
            }
        }
    }
</style>